<!-- effectScope 嵌套作用域（非 detached）演示 -->
<script setup>
import { computed, watch, watchEffect, effectScope, ref } from "vue";

// 外层作用域
const scope = effectScope();

let counter, doubled;

scope.run(() => {
  counter = ref(0);
  doubled = computed(() => counter.value * 2);

  // 嵌套作用域（没有 detached）=> 会被父作用域 stop 一起销毁
  const nested = effectScope();
  nested.run(() => {
    watch(doubled, () => {
      console.log("%c[嵌套作用域] doubled: " + doubled.value, "color: #16a085");
    });
  });

  // 父作用域内的副作用
  watchEffect(() => {
    console.log("%c[父作用域] Count: " + doubled.value, "color: #e67e22");
  });
});

// 停止父作用域，会连带停止内部嵌套的 effectScope
const stopAll = () => {
  console.log(
    "%c停止父作用域（嵌套也会停止）",
    "color: red; font-weight: bold;"
  );
  scope.stop();
};
</script>

<template>
  <div style="padding: 20px">
    <h3>effectScope 嵌套作用域演示（非 detached）</h3>
    <p>Count: {{ counter }} | Doubled: {{ doubled }}</p>

    <button @click="counter++">增加</button>
    <button @click="stopAll">停止所有作用域</button>

    <p style="color: #666; font-size: 14px; margin-top: 10px">
      打开控制台查看 effectScope 的日志输出。<br />
      注意：点击“停止所有作用域”后，嵌套作用域也会停止响应。
    </p>
  </div>
</template>

<style scoped>
button {
  margin-right: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
}
</style>
